<template>
  <el-dialog v-model="visible" @closed="onCancel" append-to-body :title="dialogDatas.title" center>
    <el-form :model="dialogDatas.datas"  inline ref="formRef1 "  class="px10">
      <el-col v-for="(item,index) in dialogDatas.datas" :key="item.label">
        <el-form-item :label="item.isHide?null:item.label" label-width="110" :prop="`dialogForBaseFormDatas.${index}.value`" :rules="[{ required: item.required, message: `${item.label}必填`, trigger: ['blur', 'change'] }]">
          <el-cascader
            v-model="item.value"
            :options="options"
            v-if="item.type === 'cascader'&&!item.isHide"
            :disabled="isDisabled||item.isDisabled"
            clearable
            ref="cascaderAddr"
            prop="item.value"
          />
          <el-input
            v-if="item.type === 'input'&&!item.isHide"
            v-model="item.value"
            :disabled="isDisabled||item.isDisabled"
            prop="item.value"
            :placeholder="item.placeholder"
          />
          <el-input
            v-if="item.type === 'input1'&&!item.isHide"
            v-model="item.value"
            :placeholder="item.placeholder"
            :disabled="isDisabled||item.isDisabled"
            prop="item.value"
            oninput="value=value.replace(/[^\d]/g,'')"
          />
          <el-input
            v-if="item.type === 'input2'&&!item.isHide"
            v-model="item.value"
            :placeholder="item.placeholder"
            :disabled="isDisabled||item.isDisabled"
            prop="item.value"
            maxlength="60" 
          />
          <el-input
            v-if="item.type === 'input3'&&!item.isHide"
            v-model="item.value"
            :placeholder="item.placeholder"
            :disabled="isDisabled||item.isDisabled"
            prop="item.value"
            oninput="value=value.replace(/[/\\]*/g,'')"
            maxlength="11" 
          />
          <el-input
            v-if="item.type === 'input4'&&!item.isHide"
            v-model="item.value"
            :placeholder="item.placeholder"
            :disabled="isDisabled||item.isDisabled"
            prop="item.value"
            maxlength="10" 
          />
          <el-input-number
            v-if="item.type === 'input-number'&&!item.isHide"
            v-model="item.value"
            :placeholder="item.placeholder"
            :disabled="isDisabled||item.isDisabled"
            prop="item.value"
            step="10"
            max="300"
            min="1"
          />
          <el-select
            v-if="item.type === 'select'&&!item.isHide"
            v-model="item.value"
            :placeholder="item.placeholder"
            :disabled="isDisabled||item.isDisabled"
            prop="item.value"

            value-key="value"
          >
            <el-option
              :label="option.name"
              :value="option.id"
              v-for="option in item.options()"
              :key="option.id"
            />
          </el-select>
          <el-radio-group v-model="item.value" v-if="item.type === 'radio'&&!item.isHide">
            <el-radio
            prop="item.value"

              :label="radio.label"
              v-for="(radio, radioIndex) in item.options"
              :key="radioIndex"
              :disabled="isDisabled||item.isDisabled"
            />
          </el-radio-group>
          <el-input
            v-model="item.value"
            prop="item.value"
            maxlength="300" show-word-limit
            type="textarea"
            v-if="item.type === 'textarea'&&!item.isHide"
            :disabled="isDisabled||item.isDisabled"
          />
          <!-- <el-date-picker
          prop="item.value"
            v-if="item.type === 'date'&&!item.isHide"
            v-model="item.value"
            type="date"
            :placeholder="item.placeholder"
            :disabled="isDisabled||item.isDisabled"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD HH:mm:ss"
          /> -->
          <!-- <el-date-picker
            prop="item.value"
            v-if="item.type === 'date'&&!item.isHide"
            v-model="item.value"
            type="date"
            :placeholder="item.placeholder"
            :disabled="isDisabled||item.isDisabled"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD HH:mm:ss"
          /> -->
          <el-date-picker
            prop="item.value"
            v-if="item.type === 'date'&&!item.isHide"
            v-model="item.value"
            type="date"
            :placeholder="item.placeholder"
            :disabled="isDisabled||item.isDisabled"
            format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
           
          />
          <!--  :disabled-date="disabledDate" -->
        </el-form-item>
      </el-col>
    </el-form>

    <template #footer v-if="!isDisabled">
      <span class="dialog-footer flex justify-center my6">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="onConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, watch, onBeforeMount } from 'vue';
import type { IUserItem } from '@/api/user/type';
import regionData from '@/assets/json/regionData.json';

const emits = defineEmits(['onConfirm ', 'handleFormValue', 'onCancel', 'onConfirm']);

const options = ref(regionData);
const visible = ref(false);
const dialogDatas = reactive({});
let chanFormValue = reactive({});
const formRef1 = ref<FormInstance>();
watch(dialogDatas, () => {
  dialogDatas.datas.forEach((d: { value: any[]; type: string; eName: string | number | any[] }) => {
    if (d.value||d.value===0) {
      if (d.type === 'cascader') {
        d.keys.forEach((item: string | number, i: number) => {
          chanFormValue[item] = d.value[i];
        });
        return;
      }
      chanFormValue[d.eName] = d.value;
    }else{
      delete  chanFormValue[d.eName]
    }
  });
  emits('handleFormValue', chanFormValue);
});
const init = async (data?: IRoleItem) => {
  if (data) {
    // await nextTick();
    Object.assign(dialogDatas, data);
  }
};
const cascaderAddr=ref()
let cascaderLabel=ref([])
 
    // const disabledDate = (time:Date) => {
    //   return time.getTime() > Date.now() - 8.64e7; // 8.64e7 毫秒数代表一天
    // };
 
  

const isDisabled = computed(() => (dialogDatas.type === 'check' ? true : false)); //查看为不可编辑
const onReset = () => {
  //重置表单
  if (!formRef1.value) return;
  formRef1.value.resetFields();
};
const onCancel = () => {
  //取消按钮事件
  onReset();
  emits('onCancel');
};
const onConfirm = () => {
  //确定按钮事件
  onReset();

  emits('onConfirm', chanFormValue, dialogDatas.type , dialogDatas.row);
};
const handleDialog=(value)=>{
  visible.value=value
}
// const handleChange=()=> {
//       const checkedNodes = cascaderAddr.value[0].getCheckedNodes() // 获取当前点击的节点
//       cascaderLabel= checkedNodes[0].pathLabels
//       console.log(checkedNodes[0].pathLabels) // 获取由 label 组成的数组
//       dialogDatas.datas.forEach((d: { value: any[]; type: string; eName: string | number | any[] }) => {
//     if (d.value||d.value===0) {
//       if (d.type === 'cascader') {
//         chanFormValue[d.eName] = cascaderLabel
//       }
//     }
//   });
//   emits('handleFormValue', chanFormValue);
// }

defineExpose({ init ,handleDialog});
</script>

<style lang="scss" scoped></style>
